<template>
	<view class="custom-bg p-30">
		<Header title="领取茶水费" />


		<!-- ===================发布提示=================== -->
		<Modal v-if="TipsShow" :confirmText="'去提交'" :showCancel="true" cancel-text="再想想" @cancel="TipsShow=false"
			@confirm="submit2">
			<div class="center mb-50 mt-20 text-gray-a4" style="line-height: 50rpx;">
				{{textData.lqcsfgzwz}}
			</div>
		</Modal>
		<!-- ===================发布提示=================== -->


		<div class="custom-input mt-18" style="position: relative;">
			<div class="fz30 text-gray-16 mr-30 flex-shirnk-0 w-120">联系方式</div>
			<input type="number" maxlength="11" :disabled="true" class="fz22 h-full w-full  pt-5" v-model="tel" placeholder="请输入我的方式">
			<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" style="width: 100px; z-index: 1111; border-radius: 5px;line-height: 35px; height: 35px;position: absolute; left: 70%;top: 10%;">
				<view class="wechat_img" style="font-size: 12px;">
					<!-- <image src="@/static/phone.png" mode=""></image> -->
					授权手机号
				</view>
			</button>
		</div>


		<div class="fz30 text-gray-16 mt-37 mb-30">信息描述</div>

		<div style="background-color: #F8F8F8;box-sizing: border-box;" class="w-full rounded-22 p-30">
			<textarea class="w-full h-full" v-model="content"  :placeholder="neirong" style="height: 350rpx;white-space: pre-wrap"></textarea>
			<div class="fz26 text-gray-16 " style="text-align: right;">{{content.length}}/150</div>
		</div>


		<div class="fz30 text-gray-16 mt-37 mb-30">添加图片(仅可添加3张)</div>

		<div class="flex flex-wrap">
			<!-- <div class="relative mr-10 overflow-hidden w-160 h-160" style="border-radius: 22rpx;" v-for="item in 3">
				<div class="absolute r-0 t-0 z-10 w-45 h-45 bg-black-2 center"
					style="border-bottom-left-radius: 12rpx;">
					<image src="/static/publish/del2.png" mode="widthFix" class="w-25 h-25"></image>
				</div>
				<image src="/static/logo.png" mode="aspectFill" class="w-160 h-160"></image>
			</div>

			<div class="relative mr-10 center overflow-hidden w-160 h-160"
				style="border-radius: 22rpx;background-color: #F8F8F8;">
				<image src="/static/publish/photo.png" mode="widthFix" class="w-45"></image>
			</div> -->
			<imageUpload :list="imageList" :maxCount="3" @change="imgFn"></imageUpload>
		</div>



		<!-- 	<div class="fz22 text-gray-900  pt-20">
			告知：不能提供虚假信息，不能欺骗，需要这个承担
			啥的
		</div> -->

		<div class="bg-purple center h-90 rounded-50 mt-35 fz30 text-white" @click="submit">
			提交
		</div>
		
		<div class="mask flex" style="justify-content: center;align-items: flex-start;padding-top: 320rpx;" v-if="modalShow"> <!--@click="readedFn2" -->
			<div class="flex-col relative" style="margin-top:100rpx">
				<image src="/static/mask/line.png" class="absolute" mode="widthFix"
					style="width:170rpx;right:-50rpx; top:-250rpx"></image>
				<image src="/static/mask/title.png" mode="widthFix" style="width:500rpx"></image>
				<image src="/static/mask/pic.png" mode="widthFix" style="width:500rpx"></image>
				<div class="center mt-50" style="display: none;">
					<image src="/static/mask/confirm.png" mode="widthFix" style="width:214rpx"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import imageUpload from "@/components/imageUpload.vue"
	import Modal from "../../../components/Modal.vue"
	import Header from "@/components/Header.vue"
	export default {
		components: {
			Header,
			imageUpload,
			Modal
		},
		data() {
			return {
				textData: {},
				TipsShow: false,
				id: '',
				tel: uni.getStorageSync('wx_phone')||'',
				content: '',
				imageList: [

				],
				imgstr: '',
				str:'',
				myInfo: {},
				readed: false,
				modalShow: false,
				neirong:"请您尽量描述一下所了解的信息，以增加真实可信度，有助于提升成交率。 \n但是，在您未收到全额茶水费时，请注意保护关键信息，保留自己核心价值。"
			}
		},
		onShareAppMessage() {
			this.readedFn2()
			return {
				title: '发布消息找到那个他/她',
				path: '/pages/index/index?id='+this.myInfo.me_invite_code,
				imageUrl: "https://seekerxcxoss.yiyankeji.vip/Label/Share_img.png"
			}
		},
		onShow() {
			this.getMyInfo();
			
			if(uni.getStorageSync('getIsFx')){
				if(uni.getStorageSync('getIsFx').is_ckxs=='1'){
					this.readed = false
					
					let timestamp = Date.now();
					if(uni.getStorageSync("readed_time2")){
						var readed_time2 = Number(uni.getStorageSync("readed_time2"))
					}else{
						var readed_time2 = 0
					}
					var cha = timestamp-readed_time2;
					if(cha>86400000){
						this.readed = false
					}else{
						if(uni.getStorageSync("readed_time2")){
							this.readed = true
						}
					}
					
				}else{
					this.readed = true
				}
				
			}else{
				this.readed = false
				
				let timestamp = Date.now();
				if(uni.getStorageSync("readed_time2")){
					var readed_time2 = Number(uni.getStorageSync("readed_time2"))
				}else{
					var readed_time2 = 0
				}
				var cha = timestamp-readed_time2;
				if(cha>86400000){
					this.readed = false
				}else{
					if(uni.getStorageSync("readed_time2")){
						this.readed = true
					}
				}
			}
			
			console.log(this.readed)
		},
		methods: {
			getphonenumber (e) {
				var that = this
				that.loading = false
			    uni.request({
					url: getApp().globalData.host + '/api/My/wxSetMyPhone',
					data: {
						code: e.detail.code,
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						uni.setStorageSync('wx_phone',r.data.data.wx_phone)
						that.tel = r.data.data.wx_phone
						that.loading = true
					},
				})
			},
			readedFn2() {
				this.modalShow = false
				this.readed = true
				
				let timestamp = Date.now();
				uni.setStorageSync("readed_time2", timestamp)
			},
			getMyInfo() {
			
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getMyInfo',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						that.myInfo = r.data.data
						console.log("myInfo", that.myInfo)
					},
				})
			},
			getPublishText() {
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getGzinfo',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						that.textData = r.data.data
						console.log("textData", that.textData)
					},
				})
			},
			imgFn(e) {
				this.imageList = e
			},
			uploadImages(path) {
				var that = this
				uni.uploadFile({
					url: getApp().globalData.host + '/api/Login/uploadImages',
					filePath: path,
					name: 'image',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: res => {
						var json = JSON.parse(res.data);
						that.imgstr += json.data.image_url + ','
					}
				})
			},
			onLoad(options) {
				this.id = options.id
				this.getPublishText()
			},
			isValidPhoneNumber(phoneNumber) {
				return /^1\d{10}$/.test(phoneNumber);
			},
			
			submit() {
				var that = this
				
				if(that.readed==false){
					that.modalShow = true
					return
				}
				
				
				if (that.tel == '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: "none"
					})
					return false
				}
				if (!that.isValidPhoneNumber(that.tel)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: "none"
					})
					return false
				}


				if (that.content == '') {
					uni.showToast({
						title: '请输入内容',
						icon: "none"
					})
					return false
				}
				if (that.imageList.length == '0') {
					uni.showToast({
						title: '请上传图片',
						icon: "none"
					})
					return false
				}
				
				uni.showLoading({
					title:'加载中请稍候'
				})
				var str = ''
				that.str = ''
				that.imgstr = ''
				for (var i = 0; i < that.imageList.length; i++) {
					str += that.imageList[i].url + ','
					that.uploadImages(that.imageList[i].url);
				}
				setTimeout(function(){
					str = that.imgstr.replace(/^,+|,+$/g, '');
					that.str = str
					that.TipsShow = true;
					uni.hideLoading()
				},3000)
			},
			submit2() {
				var that = this

				
				uni.request({
					url: getApp().globalData.host + '/api/Seek/actionSign',
					data: {
						seek_id: that.id,
						sign_phone: that.tel,
						sign_content: that.content,
						sign_img_str: that.str
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						this.TipsShow = false;
						if (r.data.code == '200') {
							// uni.showModal({
							// 	content: '提交成功'
							// })
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/ranking/ranking'
								})
							},1000)
						} else {
							uni.showModal({
								content: r.data.msg
							})
						}

					},
				})


			}
		}
	}
</script>

<style>
.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
</style>